import "./index.scss";
import { Form, Input, Button, Row, Col } from "antd";

import { Link } from "react-router-dom";

const Register = () => {
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const registerFun = () => {
    console.log("注册操作");
  };
  return (
    <div className="register-container">
      <div className="register-box">
        <div className="title-box"></div>
        <div className="form-box">
          <Form
            name="basic"
            validateTrigger="onBlur"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 17,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off">
            <Form.Item
              label="用户名"
              labelAlign="right"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入用户名!",
                },
              ]}>
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              labelAlign="right"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                },
              ]}>
              <Input.Password />
            </Form.Item>
            <Form.Item
              label="确认密码"
              labelAlign="right"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请确认密码!",
                },
              ]}>
              <Input.Password />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 0, 
              }}>
              <Button onClick={registerFun} type="primary" style={{ width: "100%" }} htmlType="submit">
                注册
              </Button>
            </Form.Item>
          </Form>
          <Row>
            <Col span={24}>
              <Button type="link">
                <Link to="/login">去登录</Link>
              </Button>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  );
};

export default Register;

//学习
/**
 * 
 1.这里的样式区分与vue的，vue是class,但是react是className
 2.点击事件绑定区分与vue， vue是通过@click="事件名称",但是react是onClick={事件名称}

wrapperCol:{
  offset:    栅格左侧的间隔格数，间隔内不可以有栅格
  span:      栅格占位格数，为 0 时相当于 display: none   总有24
}

Form表单  validateTrigger="onBlur"
 
 */
